<template>
  <div>
    <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
      <el-menu-item class="user">{{ this.user_id }}</el-menu-item>
      <el-menu-item><router-link to="/">首页</router-link></el-menu-item>
      <el-menu-item><router-link to="/publish">发布</router-link></el-menu-item>
      <el-menu-item><router-link to="/mine">我的</router-link></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
      <el-menu-item disabled></el-menu-item>
    </el-menu>

    <el-row :gutter="20">
      <el-col :span="7"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="9.5">
        <div class="grid-content bg-purple">
          <div class="card-div">
            <div v-for="content in this.article_list" :key="content[2]">
            <el-card class="box-card" shadow="hover">
              <p>userid:{{ content[0] }}</p>
              <el-divider></el-divider>
              <p>{{ content[1] }}</p>
              <p align="right" style="color:blue;font-size:10px;" @click="handleClick(content[2])"><el-link>详情</el-link></p>

            </el-card>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="7"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Test1",
  data() {
    return {
      username: '',
      user_id: '',
      article_list: []
    }
  },
  created() {
    // 获取session中存储的用户id
    this.user_id = window.sessionStorage.getItem('user_id');
    //console.log(window.sessionStorage)
    this.$http.get('/article_list').then(res => {
      console.log(res);
      this.article_list = res.data
      //console.log(this.article_list)
    }).catch(err => {
      console.log(err);
    })
  },
  mounted() {

  },
  methods:{
    // 处理查看article详细信息
    handleClick: function (id){
      //console.log(id)
      this.$router.push(`/article/${id}`)
    }
  }
}
</script>

<style scoped>
.user{
  float:right;
  font-size:92px;
}

.card-div{


}

.box-card {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 600px;
  text-align: left;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-purple {
  background: white;
}

</style>